<template>
  <div>
    <el-form ref="form" :model="form" :rules="rules" label-width="100px">

      <el-form-item label="流量卡卡号" prop="flowCardNumber">
        <el-input v-model="form.flowCardNumber" clearable placeholder="请输入流量卡卡号"/>
      </el-form-item>

      <el-form-item label="流量总额" prop="flowTotal">
        <el-input readonly disabled v-model="form.flowTotal" placeholder="流量总额"/>
      </el-form-item>

      <el-form-item label="剩余流量" prop="flowBalance">
        <el-input readonly disabled v-model="form.flowBalance" placeholder="剩余流量"/>
      </el-form-item>

      <el-form-item label="有效时间" prop="effectiveTime">
        <el-input readonly disabled v-model="form.effectiveTime" placeholder="流量卡有效时间"/>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="submitFlowCardForm">确 定</el-button>
      </el-form-item>

      <!--      <div slot="footer" class="dialog-footer">-->
      <!--        <el-button type="primary" @click="submitFlowCardForm">确 定</el-button>-->
      <!--        <el-button @click="cancel">取 消</el-button>-->
      <!--      </div>-->

    </el-form>
  </div>
</template>

<script>

  import { getFlowCardByGatewayInfoId } from '@/api/business/flowCard'

  import { updateGatewayInfoFlowCard } from '@/api/business/gatewayInfo'

  export default {
    name: 'index',
    props: {
      row: {
        type: Object
      }
    },
    created() {
      this.getFlowCardInfo(this.row.gatewayInfoId)
    },
    data() {
      return {
        form: {},
        rules: {},
        flowCardTypeList: [
          { value: '1', label: '类型1' },
          { value: '2', label: '类型2' }
        ]
      }
    },
    methods: {

      getFlowCardInfo(gatewayInfoId) {

        this.form = {}

        getFlowCardByGatewayInfoId(gatewayInfoId).then(response => {

          console.log('response。', response)
          console.log('gatewayInfoId。', gatewayInfoId)
          console.log(response.data)

          if (response.data !== undefined) {
            this.form = response.data
          } else {
            this.form.gatewayInfoId = gatewayInfoId
          }

        })
      },

      /** 修改流量卡信息 */
      submitFlowCardForm() {

        this.$refs['form'].validate(valid => {
          if (valid) {

            console.log('流量卡。', this.form)

            updateGatewayInfoFlowCard(this.form).then(response => {
              this.$modal.msgSuccess('成功')
              this.getFlowCardInfo(this.row.gatewayInfoId)
            })

          }
        })

      }
    }
  }
</script>

<style scoped>

</style>
